Skip to content

Add theme config#58411

Merged
bbovenzi merged 8 commits intoapache:mainfrom
Zinkue:add-theme-config
Dec 11, 2025
Merged

Add theme config#58411
bbovenzi merged 8 commits intoapache:mainfrom
Zinkue:add-theme-config

Conversation

@Zinkue
Copy link
Contributor

@Zinkue Zinkue commented Nov 17, 2025

closes: #53443
related: #56854

Enables the personalization of Chakra's UI theme via theme configuration property
Currently only the brand color palette can be customized.
Modifying the brand color palette you also modify the navbar/sidebar.

Provided a how-to-guide for customizing UI theme.

Screenshots

Input
green from theme.ts

AIRFLOW__API__THEME='{
  "tokens": {
    "colors": {
      "brand": {
        "50": { "value": "oklch(0.982 0.018 155.826)" },
        "100": { "value": "oklch(0.962 0.044 156.743)" },
        "200": { "value": "oklch(0.925 0.084 155.995)" },
        "300": { "value": "oklch(0.75 0.18 153.0)" },
        "400": { "value": "oklch(0.625 0.209 150.0)" },
        "500": { "value": "oklch(0.528 0.219 149.579)" },
        "600": { "value": "oklch(0.47 0.20 149.0)" },
        "700": { "value": "oklch(0.40 0.16 149.5)" },
        "800": { "value": "oklch(0.448 0.119 151.328)" },
        "900": { "value": "oklch(0.393 0.095 152.535)" },
        "950": { "value": "oklch(0.266 0.065 152.934)" }
      }
    }
  }
}'

Output
green

Input
yellow from theme.ts

AIRFLOW__API__THEME='{
  "tokens": {
    "colors": {
      "brand": {
        "50": { "value": "oklch(0.987 0.026 102.212)" },
        "100": { "value": "oklch(0.973 0.071 103.193)" },
        "200": { "value": "oklch(0.945 0.129 101.54)" },
        "300": { "value": "oklch(0.905 0.182 98.111)" },
        "400": { "value": "oklch(0.852 0.199 91.936)" },
        "500": { "value": "oklch(0.795 0.184 86.047)" },
        "600": { "value": "oklch(0.681 0.162 75.834)" },
        "700": { "value": "oklch(0.554 0.135 66.442)" },
        "800": { "value": "oklch(0.476 0.114 61.907)" },
        "900": { "value": "oklch(0.421 0.095 57.708)" },
        "950": { "value": "oklch(0.286 0.066 53.813)" },
      },
    }
  }
}'

Output
yellow

Input
red from theme.ts

AIRFLOW__API__THEME='{
  "tokens": {
    "colors": {
      "brand": {
        "50": { "value": "oklch(0.971 0.013 17.38)" },
        "100": { "value": "oklch(0.936 0.032 17.717)" },
        "200": { "value": "oklch(0.885 0.062 18.334)" },
        "300": { "value": "oklch(0.808 0.114 19.571)" },
        "400": { "value": "oklch(0.704 0.191 22.216)" },
        "500": { "value": "oklch(0.637 0.237 25.331)" },
        "600": { "value": "oklch(0.577 0.245 27.325)" },
        "700": { "value": "oklch(0.505 0.213 27.518)" },
        "800": { "value": "oklch(0.444 0.177 26.899)" },
        "900": { "value": "oklch(0.396 0.141 25.723)" },
        "950": { "value": "oklch(0.258 0.092 26.042)" }
      }
    }
  }
}'

Output
red

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in airflow-core/newsfragments.

@boring-cyborg boring-cyborg bot added area:API Airflow's REST/HTTP API area:ConfigTemplates area:UI Related to UI/UX. For Frontend Developers. kind:documentation labels Nov 17, 2025
@Zinkue
Copy link
Contributor Author

Zinkue commented Nov 17, 2025

About the palette generator for us to make a suggestion.

I found this ones:

Played a little bit with them and both looks fine to me

@Zinkue Zinkue marked this pull request as ready for review November 17, 2025 22:41
@Zinkue Zinkue force-pushed the add-theme-config branch 2 times, most recently from 0946506 to 0c48e71 Compare November 23, 2025 11:34
@Zinkue
Copy link
Contributor Author

Zinkue commented Nov 23, 2025

Link to previous discussion/PR: #56854

@Zinkue Zinkue force-pushed the add-theme-config branch 2 times, most recently from 44c7a5b to 53d23c2 Compare December 3, 2025 20:54
@bbovenzi bbovenzi added this to the Airflow 3.2.0 milestone Dec 4, 2025
bbovenzi
bbovenzi reviewed Dec 4, 2025
View reviewed changes
Copy link
Contributor

@bbovenzi bbovenzi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc: @odaneau-astro

bbovenzi
bbovenzi approved these changes Dec 11, 2025
View reviewed changes
Copy link
Contributor

@bbovenzi bbovenzi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!

@bbovenzi bbovenzi merged commit 09350e3 into apache:main Dec 11, 2025
125 checks passed
@Zinkue Zinkue deleted the add-theme-config branch December 12, 2025 21:03
@marcosmartinezfco
Copy link

marcosmartinezfco commented Dec 15, 2025

Amazing feature, is this expected to be released in version 3.2 or earlier?

@pierrejeambrun
Copy link
Member

pierrejeambrun commented Dec 15, 2025

Amazing feature, is this expected to be released in version 3.2 or earlier?

This is a feature and will be in next minor release (3.2.0), we follow semver.

@marcosmartinezfco
Copy link

marcosmartinezfco commented Dec 15, 2025

Amazing feature, is this expected to be released in version 3.2 or earlier?

This is a feature and will be in next minor release (3.2.0), we follow semver.

Sweet, thanks so much.

jhgoebbert pushed a commit to jhgoebbert/airflow_Owen-CH-Leung that referenced this pull request Feb 8, 2026
@Zinkue @jhgoebbert
Add theme config (apache#58411)
20c9a4f 
* Add theme config property

* Add custom theme to Chakra UI's theme

* Add Oklch type and unit tests

* Add UI documentation

* Fix CI test_config

* Fix Oklch regex

* Move ChakraCustomProvider.tsx

* Create defaultSystem
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bbovenzi bbovenzi bbovenzi approved these changes

@pierrejeambrun pierrejeambrun Awaiting requested review from pierrejeambrun pierrejeambrun is a code owner

@ryanahamilton ryanahamilton Awaiting requested review from ryanahamilton ryanahamilton is a code owner

@shubhamraj-git shubhamraj-git Awaiting requested review from shubhamraj-git shubhamraj-git is a code owner

@guan404ming guan404ming Awaiting requested review from guan404ming guan404ming is a code owner

@ephraimbuddy ephraimbuddy Awaiting requested review from ephraimbuddy ephraimbuddy is a code owner

@rawwar rawwar Awaiting requested review from rawwar rawwar is a code owner

@jason810496 jason810496 Awaiting requested review from jason810496 jason810496 is a code owner

@bugraoz93 bugraoz93 Awaiting requested review from bugraoz93 bugraoz93 is a code owner

Assignees

No one assigned

Labels

area:API Airflow's REST/HTTP API area:ConfigTemplates area:UI Related to UI/UX. For Frontend Developers. kind:documentation

Projects

None yet

Milestone

Airflow 3.2.0

Development

Successfully merging this pull request may close these issues.

Add side/navbar_color config for Airflow 3.x

4 participants

@Zinkue @marcosmartinezfco @pierrejeambrun @bbovenzi